<template>
  <div class="upImgList">
      <div class="upImgItem">
          <div v-if="!headImg" :class="'upImg iconfont icon-xiangji2'"></div>
          <img v-if="headImg" :src="headImg+ossSrc" />
          <input accept="image/*" ref="file" type="file" @change="upImgFn($event)" />
          <div v-if="headImg" class="upIcon iconfont icon-xiangji2"></div>
      </div>
      <sub-load v-if="upMoreImgLoad"></sub-load>
      <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>

  </div>
</template>

<script>
import {Toast } from 'vux'
import SubLoad from './subLoad.vue'

  export default {
    components: {Toast,SubLoad},
    data() {
      return {
        showText:'',
        showToast:false,
        headImg:this.propImg,
        upMoreImgLoad:false,
      }
    },
    props: {
      icon:{},
      propImg:String,
    },
    methods:{
      upImgFn(e){
          let file = e.target.files[0]
          let formData = new FormData();// 可以增加表单数据
          formData.append("file",file);
          if(!this.upMoreImgLoad){
            this.upMoreImgLoad = true
            $.ajax({
              url:this.apis+'/common/Upload/UpImg',
              dataType:"json",
              type:'post',
              processData : false,
              contentType : false,
              data:formData,
              success:(res)=>{
                  if(res.code==1){
                      this.headImg = res.data.src
                      this.$emit('upImgSuccess',this.headImg)
                  }else{
                    this.showToast = true
                    this.showText = res.msg
                  }
                  this.upMoreImgLoad = false
              },
              error:(res)=>{
                  this.upMoreImgLoad = false
                  this.showToast = true
                  this.showText = '网络超时'
              }
            })
          } 
        },
    },
    mounted(){
    },
    created() {
    },
  }
</script>

<style scoped lang="less">
.upImgList{
      flex: 1;
      width: 5rem;
      box-sizing: border-box;
      .upImgItem{
          width: 5rem;
          border-radius: 0.25rem;
          background-color: #f7f8fa;
          position: relative;
          margin-bottom: 1.5rem;
          border: 1px solid #f7f8fa;
          box-sizing: border-box;
  
          .upImg{
              width: 100%;
              height: 100%;
              text-align: center;
              line-height: 5rem;
              font-size: 2rem;
              color: #ccc;
          }
          input{
              width: 100%;
              height: 100%;
              opacity: 0;
              position: absolute;
              top: 0;
              left: 0;
          }
          img{
              width: 100%;
          }
          .upIcon{
              position: absolute;
              bottom: 0;
              right: 0;
              font-size: 0.9rem;
              color: #fff;
              width: 1.5rem;
              height: 1.5rem;
              background-color: black;
              text-align: center;
              line-height: 1.5rem;
              border-radius: 0.75rem 0 0 0;
          }
      }
  }
</style>
